<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>模型矩阵</title>
  <link rel="icon" href="https://img.kaikeba.com/kkb_portal_icon.ico">
  <style>
    body {
      margin: 0;
      overflow: hidden
    }
  </style>
</head>

<body>
  <canvas id="canvas"></canvas>
  <script id="vertexShader" type="x-shader/x-vertex">
    attribute vec4 a_Position;
    uniform mat4 u_ViewMatrix;
    uniform mat4 u_ModelMatrix;
    void main(){
      gl_Position = u_ViewMatrix*u_ModelMatrix*a_Position;
    }
  </script>
  <script id="fragmentShader" type="x-shader/x-fragment">
    void main(){
      gl_FragColor=vec4(1.0,1.0,1.0,1.0);
    }
  </script>
  <script type="module">
    import { initShaders } from '../jsm/Utils.js';
    import { Matrix4, Vector3, Quaternion } from 'https://unpkg.com/three/build/three.module.js';

    const canvas = document.getElementById('canvas');
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    const gl = canvas.getContext('webgl');

    const vsSource = document.getElementById('vertexShader').innerText;
    const fsSource = document.getElementById('fragmentShader').innerText;
    initShaders(gl, vsSource, fsSource);
    gl.clearColor(0.0, 0.0, 0.0, 1.0);

    const verticeLib = [
      1.0, 1.0, 1.0,
      -1.0, 1.0, 1.0,
      -1.0, -1.0, 1.0,
      1.0, -1.0, 1.0,
      1.0, -1.0, -1.0,
      1.0, 1.0, -1.0,
      -1.0, 1.0, -1.0,
      -1.0, -1.0, -1.0,
    ];

    const indices = [
      0, 1,
      1, 2,
      2, 3,
      3, 0,

      0, 5,
      1, 6,
      2, 7,
      3, 4,

      4, 5,
      5, 6,
      6, 7,
      7, 4
    ];

    const arr = [];
    indices.forEach(n => {
      const i = n * 3
      arr.push(
        verticeLib[i] / 5,
        verticeLib[i + 1] / 5,
        verticeLib[i + 2] / 5,
      )
    })
    const vertices = new Float32Array(arr)

    const vertexBuffer = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
    gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
    const a_Position = gl.getAttribLocation(gl.program, 'a_Position');
    gl.vertexAttribPointer(a_Position, 3, gl.FLOAT, false, 0, 0);
    gl.enableVertexAttribArray(a_Position);

    const u_ViewMatrix = gl.getUniformLocation(gl.program, 'u_ViewMatrix')
    const u_ModelMatrix = gl.getUniformLocation(gl.program, 'u_ModelMatrix')
    const viewMatrix = new Matrix4().lookAt(
      new Vector3(0.2, 0.2, 1),
      new Vector3(0, 0, 0),
      new Vector3(0, 1, 0)
    )
    //模型矩阵
    const modelMatrix = new Matrix4()
    // modelMatrix.makeRotationY(0.3)

    gl.uniformMatrix4fv(u_ViewMatrix, false, viewMatrix.elements)
    gl.uniformMatrix4fv(u_ModelMatrix, false, modelMatrix.elements)

    gl.clear(gl.COLOR_BUFFER_BIT);
    gl.drawArrays(gl.LINES, 0, indices.length);


    let angle = 0;
    !(function ani() {
      angle += 0.02
      modelMatrix.makeRotationY(angle)
      gl.uniformMatrix4fv(u_ModelMatrix, false, modelMatrix.elements)
      gl.clear(gl.COLOR_BUFFER_BIT);
      gl.drawArrays(gl.LINES, 0, indices.length);
      requestAnimationFrame(ani)
    })()

  </script>
</body>

</html>